<template>
    <div class="body">
        <div class="Form">
            <el-tabs type="border-card" v-model="select">

                <el-tab-pane label="登录" class="Login" style="height:450px" name="loginindex">
                    <div style="width: 300px;  color: #FFB916; font-size: medium;">
                        <p>
                            <span>
                                立即登录,享受福利!

                            </span>
                        </p>
                    </div>

                    <el-input v-model="LoginPhone" placeholder="手机号码" prefix-icon="user"
                        style="width:300px; height:40px" />
                    <br>
                    <br>
                    <el-input v-model="LoginCode" placeholder="验证码" prefix-icon="CircleCheck"
                        style="width: 200px;height:40px" />

                    <el-button type="success" plain style="width: 100px;height:40px">发送短信验证码</el-button>

                    <div>
                        <p>
                            <span>或者</span>
                            <span>使用
                                <span style="color:#FFB916;" @click="">登录密码登录</span>
                            </span>
                        </p>
                    </div>


                    <el-input v-model="LoginPassword" type="password" placeholder="请输入密码" show-password
                        prefix-icon="Lock" style="width: 300px;height:40px" />
                    <br>
                    <br>
                    <el-button type="warning" plain style="width: 300px; height:40px" @click="login">登录</el-button>

                    <div style="width:200px ;height:40px ;margin-left: 160px;">
                        <p>
                            <span>没有账号?</span>
                            <a href="##" style="text-decoration: none; color: #FFB916; font-size: medium;"
                                @click="ksmessage">快速注册</a>
                        </p>
                    </div>

                </el-tab-pane>



                <el-tab-pane label="注册" class="Register" style="height:450px" name="messageindex">
                    <div style="width: 300px;  color: #FFB916; font-size: medium;">
                        <p>
                            <span>
                                一分钟注册账号,立即享受小团福利!

                            </span>
                        </p>
                    </div>
                    <el-input v-model="RegisterPhone" placeholder="请输入手机号码" prefix-icon="user"
                        style="width: 300px; height:40px" />
                    <br>
                    <br>

                    <el-input v-model="Code" placeholder="请输入右侧验证码" prefix-icon="CircleCheck"
                        style="width: 200px;height:40px" />
                    <img :src="refreshCode" title="刷新" id="vcode" @click="refreshCode()" />
                    <br>
                    <br>


                    <el-input v-model="RegisterCode" placeholder="验证码" prefix-icon="CircleCheck"
                        style="width: 200px;height:40px" />
                    <el-button type="success" plain style="width: 100px; height:40px">发送短信验证码</el-button>


                    <div>
                        <p>
                            <span style="color:#FFB916;">或者</span>
                            <span>我要设置密码</span>
                        </p>

                        <p style="font-size: small;">
                            (如没设置密码,可直接用手机验证码登录)
                        </p>
                    </div>



                    <el-input v-model="RegisterPassword" type="password" placeholder="请输入不少于6位的密码" show-password
                        prefix-icon="Lock" style="width: 300px;height:40px" />
                    <br>
                    <br>
                    <el-button type="warning" plain style="width: 300px; height:40px"
                        @click="messageuser">注册</el-button>
                    <div style="width:200px  ;height:40px ;margin-left: 160px;">
                        <p>
                            <span>已有帐号?</span>
                            <a href="##" style="text-decoration: none; color: #FFB916; font-size: medium;"
                                @click="zjlogin">直接登录</a>
                        </p>
                    </div>

                </el-tab-pane>


            </el-tabs>
        </div>
    </div>
</template>

<script >
import { ElMessage } from 'element-plus'
import http from '../../http/request'

export default {
    name: 'Login',
    components: {
       
    },

    data() {
        return {
            LoginPhone: '',
            LoginCode: '',
            LoginPassword: '',
            RegisterPhone: '',
            Code: '',
            RegisterCode: '',
            RegisterPassword: '',
            select: 'loginindex',
        }

    },
    methods: {
        login() {
            http.post("user/user/login/loginByPwd", { phone: this.LoginPhone, password: this.LoginPassword }).then((res) => {
                if (res.meta.status == 200) {
                    ElMessage({
                        showClose: true,
                        message: res.meta.msg,
                        type: 'success',
                    })
                    this.$router.push({
                        path: '/',
                    } )
                    console.log(res);
                    this.$store.state.token = res.data.token;
                } else {
                    ElMessage({
                        showClose: true,
                        message: res.meta.msg,
                        type: 'error',
                    });
                }
                
            })
        },

        ksmessage() {
            this.select = 'messageindex';
        },
        zjlogin() {
            this.select = 'loginindex';
        },
        messageuser() {
            http.post("user/user/registerByPwd", { phone: this.LoginPhone, password: this.LoginPassword }).then((res) => {
                if (res.meta.status == 200) {
                    ElMessage({
                        showClose: true,
                        message: res.meta.msg,
                        type: 'success',
                    })
                    this.select = 'loginindex';
                    this.LoginPhone = '';
                    this.LoginPassword = '';

                } else {
                    ElMessage({
                        showClose: true,
                        message: res.meta.msg,
                        type: 'error',
                    });
                }
                console.log(res);
            })
        }

    },
    mounted(){

    },
}


</script>
<style>
.body {
    width: 1500px;
    height: 1200px;
    background-size: 100% 100%;

    background-image: url('../../image/u1.jpg');





}

.Form {
    width: 423px;
    overflow: hidden;
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 800px;
    right: 0;
    margin: auto;









}

.el-tabs__item {
    width: 210px;


    text-align: center;
    font-size: 16px;

}


.Login {
    width: 100%;
    text-align: left;
    padding-left: 50px;
}

.Register {
    width: 100%;
    text-align: left;
    padding-left: 50px;
}
</style>
